<template>
	<div class="wrapper">
		<div class="box" :style="style">
			{{ a }} + {{ b }} = {{ c }}
		</div>
		<div class="box2"></div>
	</div>
	<div class="box4">4</div>
	<div class="box5">5</div>
	<div class="box6">6</div>
	<button class="mybtn" @click="add">操作</button>
	<button class="mybtn" @click="step1">操作1</button>
	<button class="mybtn" @click="step2">操作2</button>
	<button class="mybtn" @click="step3">操作3</button>
	<button class="mybtn" @click="step4">操作4</button>
	<button class="mybtn" @click="step5">操作5</button>
	<button class="mybtn" @click="step6">操作6</button>
</template>
<script>
import { mat4 } from '@/libs/glmatrix/gl-matrix';
import { gsap } from 'gsap';
import { MotionPathPlugin, InertiaPlugin, Draggable } from 'gsap/all';
export default {
	data() {
		return {
			a: 1,
			b: 2,
			style: {}
		}
	},
	computed: {
		c() {
			return this.a + this.b;
		}
	},
	methods: {
		add() {
			console.log(`helloworld`);
			this.a++;
		},
		step1() {
			// 先平移100px，再中心旋转
			let translateMat = mat4.create();
			let rotateMat = mat4.create();
			mat4.translate(translateMat, translateMat, [100, 0, 0]);
			mat4.rotateZ(rotateMat, rotateMat, Math.PI / 4);
			let endMat = mat4.create();
			mat4.mul(endMat, endMat, translateMat);
			mat4.mul(endMat, endMat, rotateMat);
			this.style = {
				transform: `matrix3d(${endMat.join(',')})`
			}
			console.log(this.style);
		},
		step2() {
			//先平移100px，再中心旋转
			let translateMat = mat4.create();
			let rotateMat = mat4.create();
			mat4.translate(translateMat, translateMat, [100, 0, 0]);
			mat4.rotateZ(rotateMat, rotateMat, Math.PI / 4);
			let endMat = mat4.create();
			mat4.mul(endMat, rotateMat, endMat);
			mat4.mul(endMat, translateMat, endMat);
			this.style = {
				transform: `matrix3d(${endMat.join(',')})`
			}
			console.log(this.style);
		},
		step3() {
			let element = document.querySelector('.box');
			gsap.to(element, {
				duration: 0.3,
				rotation: '30deg',
				x: 100,
				y: 30,
				onComplete() {
					let matrix = MotionPathPlugin.getGlobalMatrix(element),
						// 0,0 is the top left corner, but you can use any local coordinates.
						localPoint = { x: 0, y: 0 },
						// get a new point with the matrix transformations applied.
						globalPoint = matrix.apply(localPoint);

					console.log(globalPoint);
					gsap.to('.box2', {
						...globalPoint,
						duration: 0.3
					})
				}
			})
		},
		step4() {
			gsap.to('.box4', {
				inertia: {
					x: {
						velocity: 500,
						max: 1024,
						min: 0,
					},
					y: {
						velocity: -300,
						max: 720,
						min: 0,
					},
				}
			});
		},
		step5() {
			Draggable.create(".box5", {
				type: "x",
				bounds: 'html'
			});
		},
		step6() {
			Draggable.create(".box6", {
				type: "x,y",
				bounds: 'html',
				liveSnap: {
					//snaps to the closest point in the array, but only when it's within 15px (new in GSAP 1.20.0 release):
					points: [
						{ x: 0, y: 0 },
						{ x: 100, y: 0 },
						{ x: 200, y: 50 },
					],
					radius: 15,
				},
				inertia: true
			});
		}
	},
	mounted() {
		gsap.registerPlugin(InertiaPlugin);
		gsap.registerPlugin(Draggable)
		console.log(gsap);
	}
}
</script>
<style lang="scss">
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	background: #fff;
	margin-left: 100px;
	margin-top: 100px;
}
.box2 {
	width: 10px;
	height: 10px;
	border: 1px solid #000;
	position: absolute;
	left: 0;
	top: 0;
}
.box4 {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.box5 {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.box6 {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.wrapper {
	height: 120px;
}
</style>